<template>
	<view class="production-detail-box">
		<view class="box-item">
			<navBar title="查看详情" goBackUrl="/pages/homePage/homePage" @goBack="goBack"></navBar>
			<view class="placeholder-box"></view>
			<view class="form-box-production">
				<view class="pro-item">
					<text class="item-label">基地</text>
					<text class="item-value long">{{ detailObj.baseName }}</text>
				</view>
				<view class="pro-item">
					<text class="item-label">例会日期</text>
					<view class="item-value">
						<text>{{ detailObj.time || '' }}</text>
					</view>
				</view>
			</view> 
			<view class="space-box"></view>
			<view class="form-box-production">
				<view class="item-picture-title">
					<text>例会资料</text>
<!-- 					<view class="picture-box">
						<u-album :urls="detailObj.imgs1" keyName="src" singleMode="aspectFit" singleSize="135" multipleSize="212rpx" v-if="detailObj.imgs1 && detailObj.imgs1.length > 0"></u-album>
						<view class="picture-empty" v-else>
							<img src="http://cdn.uviewui.com/uview/empty/data.png"  alt="" width="100px" height="100px">
							<text>暂无图片</text>
						</view>
					</view> -->
					<view class="image-list" v-if="detailObj.imgs1 && detailObj.imgs1.length > 0">
						<image @click.stop="previewImage(detailObj.imgs1, index)" v-for="(item, index) in detailObj.imgs1" :key="index" :src="item.src" mode="aspectFill"></image>
					</view>
					<view class="picture-empty" v-else>
						<img src="http://cdn.uviewui.com/uview/empty/data.png"  alt="" width="100px" height="100px">
						<text>暂无图片</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import mixins from "@/utils/mixins.js"
	import { getPicture } from '@/api/doc.js' //获取图片
	import { yieldMeetingGet } from "@/api/qualitySafetyManagement/qualitySafetyManagement.js"
	export default {
		name:'detail',
		mixins: [mixins],
		data() {
			return {	
				detailObj:{}
			}
		},
		onLoad(param) {
			if(param && param.id) {
				this.getDetail(param.id)
			}
			
		},
		methods: {
			// 返回上一级
			goBack(url){
				uni.navigateBack()
			},
			getDetail(id){
				yieldMeetingGet({id}).then(async res => {
					if(!res.success) return
					this.detailObj = res.result
					this.detailObj.time = this.getDate(this.detailObj.meetingDate)
					if(this.detailObj.meetingDoc) {
						let test1 = await this.getItemImage(this.detailObj.meetingDoc)
						this.$set(this.detailObj, 'imgs1', test1)
					}else {
						this.detailObj.imgs1 = []
					}

				})
			},
			async getItemImage(docId) {
				return await new Promise((resolve, reject) => {
					getPicture({docId}).then(res => {
						resolve(res.result.map(it => ({
							id:it.id,
							src:this.$config.IMG_FILE_URL + it.fileName
						})));
					}).catch(err => reject(err))
				})
			},
			/** 预览图片 */
			previewImage(imgArray, index) {
				uni.previewImage({ current: index, urls: imgArray.map(item => item.src) });
			},
		}
	}
</script>

<style lang="scss" scoped>
	.production-detail-box {
		height: 100vh;
		background-color: #f5f7fb;
		/* #ifdef MP-WEIXIN */
			padding-top: 200rpx;
		/* #endif */
		.box-item {
			.placeholder-box {
				height: 30rpx;
			}
			.container-item {
				padding-top: 20rpx;
				background-color: #fff;
			}
		}
	}
	.form-box-production {
		padding: 0 40rpx;
		background: #fff;
		.pro-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			padding: 30rpx 0;
			border-bottom: 4rpx solid #f4f6f9;
			// .item-label ::before {
			// 	content: "*";
			// 	color: #FF6A6A ;
			// }
			.item-label {
				font-size: 32rpx;
			}
			.item-value {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 32rpx;
				font-weight: bold;
				color: #22204E;
				.item-time {
					margin-left: 30rpx;
					// padding-top: 10rpx;
				}
			}
			.item-value.long {
				display: block;
				max-width: 200px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
		
		.item-picture-title {
			padding: 30rpx 0;
			text {
				font-size: 32rpx;
			}
			// text ::before{
			// 	content: "*";
			// 	color: #FF6A6A ;
			// }
			.picture-box {
				margin-top: 20rpx;
				width: 100%;
				overflow-x: auto;
				display: flex;
				.item-picture {
					margin-right: 40rpx;
				}
			}
			
		}
	}
	.space-box {
		background-color: #f5f7fb;
		height: 40rpx;
	}
	.picture-empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #c0c4cc;
		text {
			font-size: 28rpx;
		}
	}
	.image-list {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
		image {
			width: 200rpx;
			height: 200rpx;
			margin-right: 16rpx;
			margin-bottom: 16rpx;
		}
	}
</style>